<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<c:set var="url" value="<%=basePath%>"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spring-Json</title>

<script type="text/javascript" src="${url }/js/jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript">
	$(document).ready(function() {
		$("#profile").click(function() {
			profile();
		});
		$("#login").click(function() {
			login();
		});
	});
	function profile() {
		var url = '/ajax/profile/';
		var query = $('#id').val() + '/' + $('#name').val() + '/'
				+ $('#status').val();
		url += query;
		alert(url);
		$.get(url, function(data) {
			alert("id: " + data.id + "\nname: " + data.name + "\nstatus: "
					+ data.status);
		});
	}
	function login() {
		var mydata = '{"name":"' + $('#name').val() + '","id":"'
				+ $('#id').val() + '","status":"' + $('#status').val() + '"}';
		alert(mydata);
		$.ajax({
			type : 'POST',
			contentType : 'application/json',
			url : '/ajax/login',
			processData : false,
			dataType : 'json',
			data : mydata,
			success : function(data) {
				alert("id: " + data.id + "\nname: " + data.name + "\nstatus: "
						+ data.status);
			},
			error : function() {
				alert('Err...');
			}
		});

		// 		$.post('http://localhost:8080/spring-json/json/person/login', {
		// 			name : $('#name').val(),
		// 			stats : $('#stats').val(),
		// 			id : $('#id').val()
		// 		}, function(data) {
		// 			alert(data);
		// 		});
	};

	// 	$.fn.serializeObject = function() {
	// 		var o = {};
	// 		var a = this.serializeArray();
	// 		$.each(a, function() {
	// 			if (o[this.name]) {
	// 				if (!o[this.name].push) {
	// 					o[this.name] = [ o[this.name] ];
	// 				}
	// 				o[this.name].push(this.value || '');
	// 			} else {
	// 				o[this.name] = this.value || '';
	// 			}
	// 		});
	// 		return o;
	// 	};
</script>
</head>
<body>
<a href="/ajax/test">另一个Ajax例子</a>
	<table>
		<tr>
			<td>序号</td>
			<td><input id="id" value="100" /></td>
		</tr>
		<tr>
			<td>名字</td>
			<td><input id="name" value="冬国" /></td>
		</tr>
		<tr>
			<td>状态</td>
			<td><input id="status" value="true" /></td>
		</tr>
		<tr>
			<td><input type="button" id="profile" value="GET方式" /></td>
			<td><input type="button" id="login" value="POST方式" /></td>
		</tr>
	</table>
</body>
</html>